<template>
	<view>
		<swiper style="height: calc(100vh - 150rpx);" :current="swipercurrent" @change="changeswiper">
			<!-- 单选多选 -->
			<swiper-item v-for="(item,index) in timu_list" :key="item.id">
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);position: relative;" @scroll="scrollchange">
					<view class="" style="padding-bottom: 100rpx;" :id="'swiper'+item.id">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">{{index+1}}/{{timu_list.length}}</view>
							<u-line-progress :percentage="percentage(index)" :showText="false" height="8"
								activeColor="#3478f5" inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<!-- 0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题  -->
						<view class="flexbetween margin_top">
							<view class="titype xiaolan" v-if="item.type_text">{{item.type_text}}</view>
							<view v-else></view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="Number(duration) *60 *1000" class="hong_text bold main_size"
									format="HH:mm:ss" @finish="finish"></u-count-down>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>{{item.name}}</text>
							<text class="hui_text" style="font-weight: 400;">（{{item.score}}分）</text>
						</view>
						<template v-if="item.image_text">
							<image :src="item.image_text" class="margin_top" style="width: 100%;height: 250rpx;"
								mode=""></image>
						</template>
						<template v-if="item.audio_text">
							<view class="tingliclass flexbetween margin_top">
								<view class="flexleft margin_right" v-if="!item.is_play" @click="playAudio(index,item)">
									<u-icon name="play-circle" color="#999" size="28"></u-icon>
								</view>
								<view class="flexleft margin_right" v-if="item.is_play" @click="playAudio(index,item)">
									<u-icon name="pause-circle" color="#999" size="28"></u-icon>
								</view>
								<view class="flexbetween" style="width: 100%;">
									<view class="xiaohui">{{item.ybf_time | timeToMinute}}</view>
									<view style="width: 400rpx;">
										<slider activeColor="rgb(52, 120, 245)" backgroundColor="rgba(212, 212, 212, 1)"
											:block-size="12" :max="item.audio_duration" :value="item.ybf_time"
											@change="sliderToPlay($event,index,item)" />
									</view>
									<view class="xiaohui">{{item.audio_duration | timeToMinute}}</view>
								</view>
							</view>
						</template>
						<!-- 题目类型开始 -->
						<!-- 情景选择题 -->
						<template v-if="item.type==0">
							<view v-for="(ite,inde) in item.children" :key="ite.id">
								<view class="titletext bold hei_text margin_top">
									<text>{{ite.name}}</text>
									<text class="hui_text" style="font-weight: 400;">（{{ite.score}}分）</text>
									<text class="titype xiaolan">{{ite.type_text}}</text>
								</view>
								<template v-if="ite.type==1">
									<view class="flexleft tilable margin_top"
										:class="ite.dxtvalue==it.key?'lancontent':''" v-for="it in ite.content_json"
										:key="it.key" @click="changedxtvalue(ite,it)">
										<view class="titletext bold" :class="ite.dxtvalue==it.key?'lan_text':'hei_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<view :class="ite.dxtvalue==it.key?'xiaolan':'xiaohui'"
											style="min-width: 80%;max-width: 80%;">{{it.value}}</view>
									</view>
								</template>
								<template v-if="ite.type==2">
									<view class="flexleft tilable margin_top" :class="it.is_check?'lancontent':''"
										v-for="it in ite.content_json" :key="it.key" @click="dxtclick(it)">
										<view class="titletext bold" :class="it.is_check?'lan_text':'hei_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<view :class="it.is_check?'xiaolan':'xiaohui'"
											style="min-width: 80%;max-width: 80%;">{{it.value}}</view>
									</view>
								</template>
								<template v-if="ite.type==3">
									<view class="flexleft tilable margin_top"
										:class="ite.pdtvalue==it.key?'lancontent':''" v-for="it in ite.content_json"
										:key="it.key" @click="changepdtvalue(ite,it)">
										<view class="titletext bold" :class="ite.pdtvalue==it.key?'lan_text':'hei_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<view :class="ite.pdtvalue==it.key?'xiaolan':'xiaohui'"
											style="min-width: 80%;max-width: 80%;">{{it.value}}</view>
									</view>
								</template>
								<template v-if="ite.type==4">
									<view class="flexbetween">
										<canvas :canvas-id="'drawCanvas'+ite.id" :style="{height:item.swiperHeight+'rpx'}"
											style="width: 750rpx;position: absolute;top: 0;left: 0;z-index: -1;">
										</canvas>
										<view class="left">
											<view class="tilable margin_top xiaohui" :id="'left'+index+inde+xb" v-for="(it,xb) in ite.left"
												:key="xb" @click="lineleft($event,ite,it)">{{it.name}}</view>
										</view>
										<view class="right">
											<view class="tilable margin_top xiaohui" :id="'right'+index+inde+xb" v-for="(it,xb) in ite.right"
												:key="xb" @click="lineright($event,ite,it)">{{it.name}}</view>
										</view>
									</view>
								</template>
								<template v-if="ite.type==5">
									<view class="flexleft tilable margin_top" v-for="it in ite.content_json"
										:key="it.key">
										<view class="titletext bold hei_text" style="min-width: 10%;">{{it.key}}</view>
										<input type="text" class="xiaohei" placeholder="请输入答案" v-model="it.tktvalue"
											style="min-width: 80%;max-width: 80%;">
									</view>
								</template>
								<!-- 简单题 -->
								<template v-if="ite.type==6">
									<view class="jianda radius mainpadding_top">
										<textarea class="textareaclass xiaohui" placeholder="请输入答案"
											v-model="ite.jdtvalue"></textarea>
									</view>
								</template>
							</view>
						</template>
						<!-- 单选题 -->
						<template v-if="item.type==1">
							<view class="flexleft tilable margin_top" :class="item.dxtvalue==ite.key?'lancontent':''"
								v-for="ite in item.content_json" :key="ite.key" @click="changedxtvalue(item,ite)">
								<view class="titletext bold" :class="item.dxtvalue==ite.key?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view :class="item.dxtvalue==ite.key?'xiaolan':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">{{ite.value}}</view>
							</view>
							<!-- 错误的 -->
							<!-- <view class="flexleft tilable margin_top hongcontent">
								<view class="deleteimg"></view>
								<view class="titletext bold hong_text" style="min-width: 10%;">A</view>
								<view class="xiaohong" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
							<!-- 正确的 -->
							<!-- <view class="flexleft tilable margin_top lancontent">
								<view class="duiimg"></view>
								<view class="titletext bold lan_text" style="min-width: 10%;">D</view>
								<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
							<!-- 没有选择的 -->
							<!-- <view class="flexleft tilable margin_top">
								<view class="titletext bold hei_text" style="min-width: 10%;">B</view>
								<view class="xiaohui" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
							<!-- 选择的 -->
							<!-- <view class="flexleft tilable margin_top lancontent">
								<view class="titletext bold lan_text" style="min-width: 10%;">B</view>
								<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
						</template>
						<!-- 多选题 -->
						<template v-if="item.type==2">
							<view class="flexleft tilable margin_top" :class="ite.is_check?'lancontent':''"
								v-for="ite in item.content_json" :key="ite.key" @click="dxtclick(ite)">
								<view class="titletext bold" :class="ite.is_check?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view :class="ite.is_check?'xiaolan':'xiaohui'" style="min-width: 80%;max-width: 80%;">
									{{ite.value}}
								</view>
							</view>
						</template>
						<!-- 判断题 -->
						<template v-if="item.type==3">
							<view class="flexleft tilable margin_top" :class="item.pdtvalue==ite.key?'lancontent':''"
								v-for="ite in item.content_json" :key="ite.key" @click="changepdtvalue(item,ite)">
								<view class="titletext bold" :class="item.pdtvalue==ite.key?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view :class="item.pdtvalue==ite.key?'xiaolan':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">{{ite.value}}</view>
							</view>
							<!-- 已选择 -->
							<!-- <view class="flexleft tilable margin_top lancontent">
								<view class="deleteimg"></view>
								<view class="duiimg"></view>
								<view class="titletext bold lan_text" style="min-width: 10%;">A</view>
								<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
									正确</view>
							</view> -->
						</template>
						<!-- 连线题 -->
						<template v-if="item.type==4">
							<view class="flexbetween">
								<canvas :canvas-id="'drawCanvas'+item.id" :style="{height:item.swiperHeight+'rpx'}"
									style="width: 750rpx;position: absolute;top: 0;left: 0;z-index: -1;">
								</canvas>
								<view class="left">
									<view class="tilable margin_top xiaohui" :id="'left'+index+ind"
										v-for="(ite,ind) in item.left" :key="ind" @click="lineleft($event,item,ite)">
										{{ite.name}}
									</view>
								</view>
								<view class="right">
									<view class="tilable margin_top xiaohui" :id="'right'+index+ind"
										v-for="(ite,ind) in item.right" :key="ind" @click="lineright($event,item,ite)">
										{{ite.name}}
									</view>
								</view>
							</view>
						</template>
						<!-- 填空题 -->
						<template v-if="item.type==5">
							<view class="flexleft tilable margin_top" v-for="ite in item.content_json" :key="ite.key">
								<!-- <view class="deleteimg"></view> -->
								<!-- <view class="duiimg"></view> -->
								<view class="titletext bold hei_text" style="min-width: 10%;">{{ite.key}}</view>
								<input type="text" class="xiaohei" placeholder="请输入答案" v-model="ite.tktvalue"
									style="min-width: 80%;max-width: 80%;">
							</view>
						</template>
						<!-- 简答题 -->
						<template v-if="item.type==6">
							<view class="jianda radius mainpadding_top">
								<textarea class="textareaclass xiaohui" placeholder="请输入答案"
									v-model="item.jdtvalue"></textarea>
							</view>
						</template>
						<!-- <view class="flexbetween margin_top">
							<view class="hei_text bold titletext">正确答案：D</view>
							<view class="hei_text bold titletext">你的答案：A</view>
						</view>
						<view class="margin_top main_size bold lan_text">解析：</view>
						<video src="https://cdn.uviewui.com/uview/resources/video.mp4" class="margin_top"
							style="width: 300rpx;height: 200rpx;"></video>
						<view class="xiaohui margin_top">
							新课程提倡的教学观认为:教学是课程创生与开发的过程;教学是师生交往、积极互动、共同发展的过程;教学过程重于教学结果;教学更关注人而不只是科学。因此，本题选A。</view> -->
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="posibottom mainpadding flexbetween ffffff">
			<view class="flexcolumn">
				<u-icon name="file-text" color="#333" size="24" id="idceshi"></u-icon>
				<view class="xiaohei" @click="dtlshow=true">答题卡</view>
			</view>
			<view class="resetbtn" style="border-radius: 15rpx;background-color: #e6edf9;width: 40%;" @click="upswiper">
				上一题</view>
			<view class="surebtn" style="border-radius: 15rpx;width: 40%;" v-if="swipercurrent!=timu_list.length-1"
				@click="downswiper">下一题</view>
			<view class="surebtn" style="border-radius: 15rpx;width: 40%;" v-if="swipercurrent==timu_list.length-1"
				@click="tijiaoshow=true">提交</view>
		</view>
		<u-popup :show="dtlshow" @close="dtlshow=false" :round="10">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext  hei_text bold">答题卡</view>
				</view>
				<view class="flexleft flex_wrap margin_top6">
					<view class="itemkabox flexcenter margin_top2" v-for="(item,index) in timu_list" :key="index"
						@click="dtkswiper(index)">
						<view class="itemkas xiaobai">{{index+1}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="tijiaoshow" title="提交" @confirm="submitAll" closeOnClickOverlay @close="tijiaoshow=false">
			<view class="slot-content">
				<view class="margin_top flexbetween ffffff radius">
					<view class="titletext bold hei_text" style="margin-right: 120rpx;">是否选择老师</view>
					<u-radio-group placement="row" circle v-model="is_choose_teacher">
						<u-radio activeColor="#3478F5" :customStyle="{marginRight: '30rpx'}" label="是"
							name="1"></u-radio>
						<u-radio activeColor="#3478F5" label="否" name="0"></u-radio>
					</u-radio-group>
				</view>
				<view class="margin_top6 ffffff radius flexbetween" v-if="is_choose_teacher==1">
					<view class="titletext bold hei_text">请选择老师</view>
					<view class="flexright" @click="jumpurl('/pages_mine/wodels?type=1')">
						<!-- <view class="main_size bold hei_text margin_right1">请选择老师</view> -->
						<input type="text" class="main_size bold hei_text margin_right1" style="text-align: right;"
							placeholder="请选择老师" v-model="teacher_name">
						<u-icon name="arrow-right" color="#333" size="16"></u-icon>
					</view>
				</view>
				<view class="margin_top6 ffffff radius flexbetween" v-if="is_choose_teacher==0">
					<view class="titletext bold hong_text">您的试卷无需改卷将保存到我的试卷（未提交）中！卷内包含简答题为0分其他题型为正常记分！</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				dtlshow: false,
				tijiaoshow: false,
				is_choose_teacher: "0",
				teacher_name: "",
				teacher_id: "",


				education_lesson_id: "", //课程ID
				student_examination_id: "", //测试记录ID
				timu_list: [],
				duration: 0, //倒计时时长
				swipercurrent: 0, //轮播当前滑块
				swiperupcurrent: 0, //轮播上一次的滑块
				platform: "",
				bgAudioManager: null,
				audio_currentIndex: 0, //当前播放的音频下标
				flag: true,
				scrolltop:0,//滑动距离顶部的位置
				equipmentwidth:0
			}
		},
		onShow() {
			uni.$off("checkTeacher")
			uni.$on("checkTeacher", data => {
				this.teacher_id = data.id
				this.teacher_name = data.name
			})
		},
		onLoad(options) {
			let getWindowInfo = uni.getWindowInfo()
			this.equipmentwidth = getWindowInfo.screenWidth
			console.log(this.equipmentwidth,"惊雷");
			let data = JSON.parse(decodeURIComponent(options.data));
			this.education_lesson_id = data.education_lesson_id
			this.student_examination_id = data.student_examination_id
			this.duration = data.duration
			this.bgAudioManager = wx.getBackgroundAudioManager()
			this.platform = uni.getSystemInfoSync().platform;
			this.init()
		},
		onHide() {
			if (this.bgAudioManager) {
				this.bgAudioManager.stop()
			}
		},
		onUnload() {
			if (this.bgAudioManager) {
				this.bgAudioManager.stop()
			}
			this.singleSubmit(this.swipercurrent)
			this.update_duration()
		},
		watch: {
			timu_list() {
				let _this = this;
				if (_this.flag == true) {
					_this.flag = false
					_this.$nextTick(() => {
						_this.timu_list.forEach((item, index) => {
							if (item.type == 4) {
								if (item.answer) {
									let answer_content = JSON.parse(item.answer.answer_content)
									answer_content.forEach((ans, ansind) => {
										let idname1 = "#" + "left" + index + ans.left
										let idname2 = "#" + "right" + index + ans.right
										let data = {
											leftid: ans.left + 'left',
											leftitem: item.left[ans.left],
											leftmsg: {
												x: 0,
												y: 0
											},
											rightid: ans.right + 'right',
											rightitem: item.right[ans.right],
											rightmsg: {
												x: 0,
												y: 0
											}
										}
										// const query = uni.createSelectorQuery().in(this);
										uni.createSelectorQuery().select(idname2)
											.boundingClientRect(res2 => {
												data.rightmsg.x = res2.right - (index * _this.equipmentwidth) -
													res2.width
												data.rightmsg.y = res2.top + (res2.height / 2)
											}).exec();
										uni.createSelectorQuery().select(idname1)
											.boundingClientRect(res1 => {
												data.leftmsg.x = res1.left - (index * _this.equipmentwidth)
												data.leftmsg.y = res1.top + (res1.height / 2)
											}).exec();
										item.lxarr.push(data)
									})
									// console.log(item.lxarr,"数据信息维护");
									this.lxFnshow(index)
								}
							}
							if(item.type==0){
								item.children.forEach((ite,ind)=>{
									if (ite.answer && ite.type==4) {
										let answer_content = JSON.parse(ite.answer.answer_content)
										answer_content.forEach((ans, ansind) => {
											let idname1 = "#" + "left" + index + ind + ans.left
											let idname2 = "#" + "right" + index + ind + ans.right
											let data = {
												leftid: ans.left + 'left',
												leftitem: ite.left[ans.left],
												leftmsg: {
													x: 0,
													y: 0
												},
												rightid: ans.right + 'right',
												rightitem: ite.right[ans.right],
												rightmsg: {
													x: 0,
													y: 0
												}
											}
											// console.log(idname1,"左边id");
											// const query = uni.createSelectorQuery().in(this);
											uni.createSelectorQuery().select(idname2)
												.boundingClientRect(res2 => {
													data.rightmsg.x = res2.right - (index * _this.equipmentwidth) -
														res2.width
													data.rightmsg.y = res2.top + (res2.height / 2)
												}).exec();
											uni.createSelectorQuery().select(idname1)
												.boundingClientRect(res1 => {
													data.leftmsg.x = res1.left - (index * _this.equipmentwidth)
													data.leftmsg.y = res1.top + (res1.height / 2)
												}).exec();
											ite.lxarr.push(data)
										})
										// console.log(ite.lxarr,"数据信息维护");
										this.lxFnsmallshow(index,ind)
									}
								})
							}
							let idname3 = "#swiper"+item.id
							// console.log(idname3,"高度高度");
							uni.createSelectorQuery().select(idname3)
								.boundingClientRect(res2 => {
									this.$set(item,"swiperHeight",res2.height*2)
									// console.log(res2,"高度高度");
								}).exec();
						})
					})
				}
			}
		},
		methods: {
			scrollchange(e){
				this.scrolltop = Number(e.detail.scrollTop)
			},
			finish() { //倒计时结束提交
				this.singleSubmit(this.swipercurrent)
				httpRequest.request('/api/examination/submit', 'POST', {
					student_examination_id: this.student_examination_id,
					is_choose_teacher: 0,
					teacher_id: "",
				}).then(res => {
					httpRequest.toast("倒计时结束，系统自动提交答案")
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			submitAll() { //提交答题
				this.singleSubmit(this.swipercurrent)
				httpRequest.request('/api/examination/submit', 'POST', {
					student_examination_id: this.student_examination_id,
					is_choose_teacher: this.is_choose_teacher,
					teacher_id: this.is_choose_teacher ? this.teacher_id : "",
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			playAudio(index, item) { //点击音频播放音频
				this.audio_currentIndex = index
				if (!item.is_play) {
					this.bgAudioManager.title = item.name;
					// this.bgAudioManager.playbackRate = Number(this.speedText).toFixed(1)//倍速
					this.bgAudioManager.seek(item.ybf_time)
					this.bgAudioManager.singer = '志辉';
					this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
					this.bgAudioManager.src = item.audio_text
					this.timu_list[this.audio_currentIndex].is_play = true
					this.watchMusic()
				} else {
					this.timu_list[this.audio_currentIndex].is_play = false
					this.bgAudioManager.pause()
				}
			},
			sliderToPlay(t, index) {
				this.timu_list[index].ybf_time = t.detail.value
				this.bgAudioManager.seek(this.timu_list[index].ybf_time)
			},
			watchMusic() {
				let _this = this
				this.bgAudioManager.onTimeUpdate(() => {
					this.timu_list[this.audio_currentIndex].ybf_time = _this.bgAudioManager.currentTime
					// console.log(_this.bgAudioManager, "更新了");
				})
				this.bgAudioManager.onEnded(() => {
					console.log("音频播放结束");
					this.timu_list[this.audio_currentIndex].is_play = false
				})
			},
			dtkswiper(index) { //轮播图切换
				this.singleSubmit(this.swipercurrent)
				this.swipercurrent = index
				this.dtlshow = false
			},
			upswiper() { //上一题
				this.singleSubmit(this.swipercurrent)
				this.swipercurrent = this.swipercurrent - 1
			},
			downswiper() { //上一题
				this.singleSubmit(this.swipercurrent)
				this.swipercurrent = this.swipercurrent + 1
			},
			changeswiper(e) {
				this.timu_list[this.audio_currentIndex].is_play = false
				if (this.bgAudioManager) {
					this.bgAudioManager.stop()
				}
				if (e.detail.source == "touch" && e.detail.current > this.swiperupcurrent) { //用户滑动的时候提交接口并且是向后滑动时提交答案
					this.swipercurrent = e.detail.current
					this.swiperupcurrent = e.detail.current - 1
					this.singleSubmit(e.detail.current - 1)
				}
				if (e.detail.source == "touch" && e.detail.current < this.swiperupcurrent + 1) { //用户滑动的时候提交接口并且是向后滑动时提交答案
					this.swipercurrent = e.detail.current
					this.swiperupcurrent = e.detail.current
					this.singleSubmit(e.detail.current + 1)
				}
			},
			update_duration() { //更新答题时间	
				httpRequest.request('/api/examination/update_duration', 'POST', {
					student_examination_id: this.student_examination_id,
				}).then(res => {})
			},
			singleSubmit(index) { //单题提交
				//0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题 
				let current = this.timu_list[index]
				let answer_content = ""
				if (current.type == 1) { //单选题
					answer_content = current.dxtvalue
				} else if (current.type == 2) { //多选题
					let arr = []
					current.content_json.forEach(ite => {
						if (ite.is_check) {
							arr.push(ite.key)
						}
					})
					answer_content = arr.join(" ")
				} else if (current.type == 3) { //判断题
					answer_content = current.pdtvalue
				} else if (current.type == 4) { //连线题
					let arr = []
					current.lxarr.forEach(ite => {
						let left = new RegExp("left", "g")
						let right = new RegExp("right", "g")
						if (ite.leftid && ite.rightid) {
							arr.push({
								left: ite.leftid.replace(left, ""),
								right: ite.rightid.replace(right, "")
							})
						}
					})
					answer_content = JSON.stringify(arr)
				} else if (current.type == 5) { //填空题
					let arr = []
					current.content_json.forEach(ite => {
						arr.push({
							key: ite.key,
							value: ite.tktvalue
						})
					})
					answer_content = JSON.stringify(arr)
				} else if (current.type == 6) { //简答题
					answer_content = current.jdtvalue
				} else if (current.type == 0) { //情景选择题
					let answer_qjcontent = ""
					current.children.forEach(item => {
						if (item.type == 1) { //单选题
							answer_qjcontent = item.dxtvalue
						} else if (item.type == 2) { //多选题
							let arr = []
							item.content_json.forEach(ite => {
								if (ite.is_check) {
									arr.push(ite.key)
								}
							})
							answer_qjcontent = arr.join(" ")
						} else if (item.type == 3) { //判断题
							answer_qjcontent = item.pdtvalue
						} else if (item.type == 4) { //连线题
							let arr = []
							item.lxarr.forEach(ite => {
								let left = new RegExp("left", "g")
								let right = new RegExp("right", "g")
								if (ite.leftid && ite.rightid) {
									arr.push({
										left: ite.leftid.replace(left, ""),
										right: ite.rightid.replace(right, "")
									})
								}
							})
							answer_qjcontent = JSON.stringify(arr)
						} else if (item.type == 5) { //填空题
							let arr = []
							item.content_json.forEach(ite => {
								arr.push({
									key: ite.key,
									value: ite.tktvalue
								})
							})
							answer_qjcontent = JSON.stringify(arr)
						} else if (item.type == 6) { //简答题
							answer_qjcontent = item.jdtvalue
						}
						httpRequest.request('/api/examination/answer', 'POST', {
							student_examination_id: this.student_examination_id,
							education_problem_id: item.id,
							answer_content: answer_qjcontent,
						}).then(res => {})
					})
					return false
				}
				httpRequest.request('/api/examination/answer', 'POST', {
					student_examination_id: this.student_examination_id,
					education_problem_id: current.id,
					answer_content,
				}).then(res => {})
			},
			changedxtvalue(val1, val2) { //单选题处理
				val1.dxtvalue = val2.key;
			},
			changepdtvalue(val1, val2) { //判断题处理
				val1.pdtvalue = val2.key;
			},
			dxtclick(ite) { //多选题处理
				ite.is_check = ite.is_check ? false : true;
			},
			init() {
				let _this = this
				httpRequest.request('/api/examination/problemdata', 'GET', {
					education_lesson_id: this.education_lesson_id,
					student_examination_id: this.student_examination_id
				}, false, false, true).then(res => {
					//0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题 
					let arr = this.student_examination_id ? res.data : res.data.data
					arr.forEach((item, index) => {
						if (item.type == 6) {
							let jdtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "jdtvalue", jdtvalue)
						} else if (item.type == 1) { //单选题
							let dxtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "dxtvalue", dxtvalue)
						} else if (item.type == 2) { //多选题
							let arr = item.answer ? item.answer.answer_content.split(" ") : null;
							item.content_json.forEach(ite => {
								this.$set(ite, "is_check", false)
								if (arr) {
									arr.forEach(arritem => {
										if (arritem == ite.key) {
											ite.is_check = true
										}
									})
								}
							})
						} else if (item.type == 3) { //判断题
							let pdtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "pdtvalue", pdtvalue)
						} else if (item.type == 4) { //连线题
							let left = []
							let right = []
							item.content_json.forEach((ite, ind) => {
								left.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.left_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
								right.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.right_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
							})
							this.$set(item, "left", left);
							this.$set(item, "right", right);
							this.$set(item, "lxarr", []);

						} else if (item.type == 5) { //填空题
							let arr = item.answer ? JSON.parse(item.answer.answer_content) : null;
							item.content_json.forEach(ite => {
								this.$set(ite, "tktvalue", "")
								if (arr) {
									arr.forEach(arritem => {
										if (arritem.key == ite.key) {
											ite.tktvalue = arritem.value
										}
									})
								}
							})
						} else if (item.type == 0) {
							if (item.orther_type == 3) {
								// 苹果
								if (_this.platform === "ios") {
									let innerAudioContext = uni.createInnerAudioContext()
									innerAudioContext.src = item.audio_text
									innerAudioContext.onCanplay(() => { //获取总时长
										let intervalID = setInterval(() => {
											if (innerAudioContext.duration !== 0) {
												clearInterval(intervalID);
												innerAudioContext.destroy()
												_this.$set(item, "audio_duration",
													innerAudioContext
													.duration)
											}
										}, 100);
									})
								} else {
									// 安卓
									let innerAudioContext = uni.createInnerAudioContext()
									innerAudioContext.src = item.audio_text
									innerAudioContext.play();
									innerAudioContext.pause()
									innerAudioContext.onCanplay(() => { //
										let intervalID = setInterval(() => {
											if (innerAudioContext.duration !== 0) {
												clearInterval(intervalID);
												_this.$set(item, "audio_duration",
													innerAudioContext
													.duration)
											}
											innerAudioContext.destroy()
										}, 100);
									})
								}
								this.$set(item, "ybf_time", 0)
								this.$set(item, "is_play", false)
								// console.log(item, "我是音频播放");
							}
							item.children.forEach(ite => {
								if (ite.type == 6) {
									let jdtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "jdtvalue", jdtvalue)
								} else if (ite.type == 1) { //单选题
									let dxtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "dxtvalue", dxtvalue)
								} else if (ite.type == 2) { //多选题
									let arr = ite.answer ? ite.answer.answer_content.split(" ") :
										null;
									ite.content_json.forEach(it => {
										this.$set(it, "is_check", false)
										if (arr) {
											arr.forEach(arritem => {
												if (arritem == it.key) {
													it.is_check = true
												}
											})
										}
									})
								} else if (ite.type == 3) { //判断题
									let pdtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "pdtvalue", pdtvalue)
								} else if (ite.type == 4) { //连线题
									let left = []
									let right = []
									ite.content_json.forEach((it, ind) => {
										left.push({
											id: ind, //id拿下标这样后边提交方便处理
											name: it.left_value,
											ischeck: false, //连线题的ischeck跟多选区分开这样好查找
										})
										right.push({
											id: ind, //id拿下标这样后边提交方便处理
											name: it.right_value,
											ischeck: false, //连线题的ischeck跟多选区分开这样好查找
										})
									})
									this.$set(ite, "left", left);
									this.$set(ite, "right", right);
									this.$set(ite, "lxarr", []);
								} else if (ite.type == 5) { //填空题
									let arr = ite.answer ? JSON.parse(ite.answer.answer_content) :
										null;
									ite.content_json.forEach(it => {
										this.$set(it, "tktvalue", "")
										if (arr) {
											arr.forEach(arritem => {
												if (arritem.key == it.key) {
													it.tktvalue = arritem.value
												}
											})
										}
									})
								}
							})
						}
					})
					this.timu_list = arr
					if (!this.student_examination_id) {
						this.student_examination_id = res.data.student_examination_id
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			lineleft(e, current, val) {
				// console.log(e,"惊雷");
				const querys = uni.createSelectorQuery().in(this);
				querys.select("#" + e.target.id).boundingClientRect(res1 => {
					// console.log(res1,"惊雷");
					// let x = res1.left + res1.width
					let x = res1.left
					let y = res1.top + (res1.height / 2) + Number(this.scrolltop)
					// console.log(y,"9999");
					// 将默认上一次选中的左边的列表数据删除
					if (current.lxarr.length && !current.lxarr[current.lxarr.length - 1].rightid) {
						current.lxarr.pop()
					}
					// 如果已经存在连线需要将当前连线数据删除
					if (current.lxarr.length) {
						current.lxarr.forEach((item, index) => {
							if (item.leftid == val.id + "left") {
								// console.log(item, "当前选中内容");
								current.lxarr.splice(index, 1)
							}
						})
						this.lxFn(current)
					}
					current.lxarr.push({
						leftmsg: {
							x: x,
							y: y
						},
						leftitem: val,
						leftid: val.id + "left"
					})
				}).exec();
			},
			lineright(e, current, val) {
				const querys = uni.createSelectorQuery().in(this);
				querys.select("#" + e.target.id).boundingClientRect(res1 => {
					let x = res1.left
					let y = res1.top + (res1.height / 2) + Number(this.scrolltop)
					current.lxarr[current.lxarr.length - 1] = {
						leftmsg: current.lxarr[current.lxarr.length - 1].leftmsg,
						leftitem: current.lxarr[current.lxarr.length - 1].leftitem,
						leftid: current.lxarr[current.lxarr.length - 1].leftid,
						rightmsg: {
							x: x,
							y: y
						},
						rightitem: val,
						rightid: val.id + "right"
					}
					this.lxFn(current)
				}).exec();
			},
			lxFn(current) {
				const ctx = uni.createCanvasContext('drawCanvas' + current.id)
				current.lxarr.forEach(item => {
					ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
					ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
				})
				// console.log(current.lxarr, "连线题的数据内容");
				ctx.setStrokeStyle("#3478f5"); //线条颜色
				ctx.stroke() //画线条
				ctx.draw() //绘制画布内容
			},
			lxFnshow(current) {
				const ctx = uni.createCanvasContext('drawCanvas' + this.timu_list[current].id)
				let lxarr = this.timu_list[current].lxarr
				setTimeout(() => {//这里加个定时器的原因是因为上边获取元素xy是异步请求，到这里的时候值拿不到所以加个定时器方便获取到值
					lxarr.forEach((item, index) => {
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					})
					ctx.setStrokeStyle("#3478f5"); //线条颜色
					ctx.stroke() //画线条
					ctx.draw() //绘制画布内容
				}, 100)
			},
			lxFnsmallshow(current,ind){
				const ctx = uni.createCanvasContext('drawCanvas' + this.timu_list[current].children[ind].id)
				let lxarr = this.timu_list[current].children[ind].lxarr
				console.log(lxarr,9999);
				setTimeout(() => {//这里加个定时器的原因是因为上边获取元素xy是异步请求，到这里的时候值拿不到所以加个定时器方便获取到值
					lxarr.forEach((item, index) => {
						// console.log(item.leftmsg,1111);
						// console.log(item.leftmsg.x,2222);
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					})
					ctx.setStrokeStyle("#3478f5"); //线条颜色
					ctx.stroke() //画线条
					ctx.draw() //绘制画布内容
				}, 500)
			},
			percentage(index, val) { //进度条进度
				return (index + 1) / this.timu_list.length * 100
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			}
		},
		filters: {
			// 秒转换分钟00:00:00格式
			timeToMinute(times) {
				let t;
				if (times > -1) {
					let min = Math.floor(times / 60) % 60;
					let sec = times % 60;
					if (min < 10) {
						t = '0' + min + ":";
					} else {
						t = min + ":";
					}
					if (sec < 10) {
						t += "0";
					}
					t += sec.toFixed(2);
				}
				if (t) {
					t = t.substr(0, 5);
				}
				return t;
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}

	.itemkabox {
		width: 16.66%;
	}

	.itemka {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(153, 153, 153, .3);
		line-height: 80rpx;
		text-align: center;
	}

	.itemkas {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #3478f5;
		line-height: 80rpx;
		text-align: center;
	}

	.jianda {
		border: 1rpx solid rgba(153, 153, 153, .3);
	}

	.titype {
		background-color: #e6edf8;
		border-radius: 50rpx;
		padding: 10rpx 40rpx;
	}

	.tilable {
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 14rpx;
		position: relative;
		background-color: #fff;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
	}

	/deep/.u-count-down__text {
		color: #3478f5;
		font-size: 20rpx;
	}

	.hongcontent {
		border: 1rpx solid #ff0000;
		background-color: #ffebeb;
	}

	.lancontent {
		border: 1rpx solid #3478f5;
		background-color: #e6edf9;
	}

	.tingliclass {
		padding: 10rpx 30rpx;
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 50rpx;
		box-sizing: border-box;
	}
</style>